<template>
  <view class="page campus" v-if="show">
    <view class="hospital-cards">
      <view class="hospital-card" v-for="(hospital, index) in hospitals" :key="index" @click="toDetail(hospital)">
        <img :src="`${baseApi}/campus/${hospital.image}`" alt="Hospital Image" class="hospital-image">
        <view class="hospital-info">
          <h3 class="hospital-name">{{ hospital.name }}</h3>
          <p class="hospital-address">
            <i class="fas fa-map-marker-alt"></i>
            {{ hospital.address }}
          </p>
          <p class="hospital-phone">
            <i class="fas fa-phone-alt"></i>
            {{ hospital.phone }}
          </p>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['baseApi']),
  },
  data() {
    return {
      show: true,
      hospitals: [
        {
          id:1,
          name: '雅安市人民医院姚桥院区',
          address: '四川省雅安市雨城区安康路9号',
          phone: '0835-2862826',
          image: 'yq.jpg',
          path: encodeURIComponent('https://map.baidu.com/search/%E5%9B%9B%E5%B7%9D%E7%9C%81%E9%9B%85%E5%AE%89%E5%B8%82%E9%9B%A8%E5%9F%8E%E5%8C%BA%E5%AE%89%E5%BA%B7%E8%B7%AF9%E5%8F%B7/@11472863.125,3483382,15.09z?querytype=s&da_src=shareurl&wd=%E5%9B%9B%E5%B7%9D%E7%9C%81%E9%9B%85%E5%AE%89%E5%B8%82%E9%9B%A8%E5%9F%8E%E5%8C%BA%E5%AE%89%E5%BA%B7%E8%B7%AF9%E5%8F%B7&c=75&src=0&pn=0&sug=0&l=13&b=(11565488.82,3547331.48;11617072.82,3576483.48)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&device_ratio=2')
        },
        {
          id:2,
          name: '雅安市人民医院大兴院区',
          address: '四川省雅安市雨城区大兴镇健康路',
          phone: '0835-2862120',
          image: 'dx.jpg',
          path: encodeURIComponent('https://map.baidu.com/search/%E9%9B%85%E5%AE%89%E5%B8%82%E4%BA%BA%E6%B0%91%E5%8C%BB%E9%99%A2%E5%A4%A7%E5%85%B4%E9%99%A2%E5%8C%BA/@11472635.043070072,3483203.53897735,18.34z?querytype=s&da_src=shareurl&wd=%E9%9B%85%E5%AE%89%E5%B8%82%E4%BA%BA%E6%B0%91%E5%8C%BB%E9%99%A2%E5%A4%A7%E5%85%B4%E9%99%A2%E5%8C%BA&c=75&src=0&pn=0&sug=0&l=13&b=(11561947,3542562;11613531,3571714)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&device_ratio=2')
        }
      ]
    };
  },
  methods: {
    toDetail(hospital) {
      uni.setStorageSync('billArea', hospital.id)
      this.$emit('changeArea')
      this.show = false
    }
  }
};
</script>

<style scoped>
.campus {
  background-color: #FFF;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.hospital-cards {
  display: flex;
  flex-direction: column;
  gap: 48upx;
}

.hospital-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

.hospital-image {
  width: 100%;
  height: 320upx;
}

.hospital-info {
  padding: 16upx;
}

.hospital-name {
  font-size: 36upx;
  margin-bottom: 16upx;
}

.hospital-address,
.hospital-phone {
  display: flex;
  align-items: center;
  margin: 4px 0;
  font-size: 14px;
  color: #666;
}

.hospital-address i,
.hospital-phone i {
  margin-right: 8px;
  color: #00A0FF;
}
</style>

